<template>
  <div class="login">
    <div class="login-box">
      <p>后台管理系统</p>
      <el-form ref="loginRef" :model="loginForm" :rules="loginFormRules" class="login-form">
        <!--账号-->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" prefix-icon="el-icon-search"></el-input>
        </el-form-item>

        <!--密码-->
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" prefix-icon="el-icon-search" type="password"></el-input>
        </el-form-item>

        <el-form-item class="bth">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLogin">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import employ from "@/js/admin/employ";

export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: '666666',
        password: '666666'
      },
      loginFormRules: {
        //验证账号密码格式
        username: [
          {required: true, message: "请输入登录账号", trigger: "blur"},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: "请输入登录密码", trigger: "blur"},
          {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
        ]
      },
      employ: employ.employ,
      roleArr: employ.roleArr
    }
  },
  methods: {
    //重置
    resetLogin() {
      this.$refs.loginRef.resetFields()
    },
    //登录
    login() {
      this.$refs.loginRef.validate(valid => {
        if (valid) {
          let userName = false;
          let passWrod = false;
          let userRole = [];
          for (let i = 0; i < this.employ.length; i++) {
            if ((this.loginForm.username == this.employ[i].account)
                && (this.loginForm.password == this.employ[i].passwrod)) {
              userName = true;
              passWrod = true
              let user = this.employ[i]
              for (let j = 0; j < user.role.length; j++) {
                let role = user.role[j];
                for (let k = 0; k < role.role.length; k++) {
                  if (userRole.indexOf(role.role[k]) == -1) {
                    userRole.push(role.role[k]);
                  }
                }
              }
              this.employ[i].userRoles = userRole
              localStorage.setItem('user', JSON.stringify(this.employ[i]));
            }
          }
          if ((userName == true) && (passWrod == true)) {
            this.$router.push('/')
            this.$message.success('登陆成功')
          } else {
            this.$message.error('账号或者密码错误')
          }
        }
      })
    }
  },
  beforeMount() {
    let employ = JSON.parse(localStorage.getItem('employ')) || this.employ
    let roleArr = JSON.parse(localStorage.getItem('roleArr')) || this.roleArr
    localStorage.setItem('employ', JSON.stringify(employ))
    localStorage.setItem('roleArr', JSON.stringify(roleArr))
    this.employ = employ;
    this.roleArr = roleArr;
  }
}
</script>

<style scoped>
.login {
  background: url("../assets/image/login.jpg");
  background-size: 100% 100%;
  background-position: center center;
  overflow: auto;
  height: 100%;
  width: 100%;
}

html body {
  width: 100%;
  height: 100%;
}

.login-box {
  width: 390px;
  height: 260px;
  background-color: #d4d4d4;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  opacity: 0.9;
}

p {
  padding: 25px 0 10px 0;
  text-align: center;
}

.bth {
  display: flex;
  justify-content: flex-end;
}

.login-form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 26px;
  box-sizing: border-box;
}
</style>